<template>
	<view class="container home-wrap" :style="{ 'background':'linear-gradient( 44deg, #F1F6FF 0%, #D6E7FA 100%)','background-size': '100%'}">
		<shopro-navbar :isBack="true" :background="{'background':'linear-gradient( 44deg, #F1F6FF 0%, #D6E7FA 100%)','background-size': '100% 100%'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;height: 100%;">选择科目</text>
		</shopro-navbar>
		<!-- 选择考试方向 -->
		<view class="direction-section u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-column">
				<view class="direction-title" :class="{active: true}">选择考试方向</view>
				<view class="direction-desc">选择考试方向</view>
			</view>
			<image class="report-icon" :src="HTTP_IMG_URL()+'/static/images/fangxiang.png'" mode="widthFix" />
		</view>
		<!-- Tabs -->
		<view class="main-content">
			<!-- 左侧菜单 -->
			<view class="side-menu">
				<view
					v-for="(item, idx) in menuList"
					:key="item.id"
					:class="['menu-item', {active: currentMenu === idx}]"
					@click="selectMenu(idx)">
					{{ item.name }}
				</view>
			</view>
			<!-- 右侧内容区域 -->
			<view class="content-area">
				<!-- 数据对接钩子 -->
				<view v-if="contentList.length === 0" class="empty">暂无内容</view>
				<view v-else class="u-flex u-flex-items-center">
					<!-- 这里渲染内容，后续对接数据 -->
					<view :class="['courseItem', { active: currentCourse === item.title }]" v-for="(item, index) in contentList" :key="index" @click="selectTab(item, index)">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { HTTP_IMG_URL } from "@/config/app";
export default {
	data() {
		return {
			menuList: [
				{ id: 1, name: '职业资格' },
				{ id: 2, name: '无人机考试' }
			],
			currentMenu: 0,
			currentCourse: 'CAAC',
			contentList: [
				{ key: 'caac', title: 'CAAC' },
				{ key: 'aopa', title: 'AOPA' },
				{ key: 'utc', title: 'UTC' },
			]
		}
	},
	onLoad(options) {
		// console.log(options, 'options.');
		if(options){
			this.currentCourse = options.value;
			console.log(this.currentCourse, 'this.currentCourse');
		}
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		onBack() {
			uni.navigateBack();
		},
		selectTab(item, index) {
			console.log(item,'eeesssss999');
			this.currentIndex = index;
			uni.setStorageSync('examType', item.title)
			uni.navigateBack();
		},
		selectMenu(idx) {
			this.currentMenu = idx;
			// TODO: 根据菜单切换加载不同内容
			// 留下数据对接钩子
		}
	}
}
</script>

<style lang="scss">
.container {
	background: #f3f4f6;
	min-height: 100vh;
}
.header {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx 0 30rpx;
	background: linear-gradient(90deg, #eaf2ff 0%, #f3f4f6 100%);
	position: relative;
	height: 180rpx;
}
.back-btn {
	font-size: 40rpx;
	color: #333;
	margin-right: 20rpx;
}
.title {
	flex: 1;
	font-size: 40rpx;
	font-weight: 500;
	text-align: center;
	color: #222;
}
.header-img {
	width: 120rpx;
	height: 120rpx;
}
.header-image {
	width: 100%;
	height: 100%;
}
.direction-section {
	padding: 20rpx 30rpx 0 30rpx;
	min-height: 200rpx;
}
.direction-title {
	font-size: 32rpx;
	color: #2979ff;
	font-weight: 600;
}
.direction-title.active {
	color: #2979ff;
}
.direction-desc {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}
.tabs {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	margin-top: 20rpx;
	border-bottom: 2rpx solid #e5e5e5;
}
.tab {
	font-size: 30rpx;
	color: #666;
	margin-right: 60rpx;
	padding-bottom: 16rpx;
	position: relative;
}
.tab.active {
	color: #2979ff;
	font-weight: 600;
	border-bottom: 4rpx solid #2979ff;
}
.main-content {
	display: flex;
	flex-direction: row;
	height: calc(100vh - 320rpx);
}
.side-menu {
	width: 216rpx;
	background: #f7f8fa;
}
.menu-item {
	font-size: 32rpx;
	color: #333;
	padding: 30rpx 0 30rpx 30rpx;
	background: transparent;
}
.menu-item.active {
	color: #2979ff;
	background: #fff;
	font-weight: 600;
}
.content-area {
	flex: 1;
	background: #fff;
	padding: 30rpx;
	min-height: 400rpx;
}
.empty {
	color: #bbb;
	text-align: center;
	margin-top: 100rpx;
}
.courseItem{
	width: 80px;
	height: 200rpx;
	border-radius: 20rpx;
}
.courseItem.active {
	color: #2979ff;
	background: #fff;
	font-weight: 600;
}
.report-icon {
	width: 160rpx;
	margin-left: 20rpx;
}
</style>
